<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>骡窝窝积分商城购物车</title>
    <link rel="stylesheet" type="text/css" href="/mall/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/shopcar.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/loading.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/mall/js/jquery.min.js" type="text/javascript"></script>
    <script src="/mall/js/rem.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage");
            $(".loading").fadeOut(300);
        })

        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            if(user) {
                var id;
                var ids = [];
                var i = 0;
                var num = 0;
                var productId;
                //用来存储数据
                var lis = [];
                var a = 0;
                //查询当前用户的购物车
                $.get("/users/" + user.id + '/products', {pageSize: 5, type: 1}, function (data) {
                        console.log(data);
                        //获取数据并将数据存到存储区
                        data.list.forEach(function (listItem) {
                            listItem.products.forEach(function (product) {
                                console.log(product.shopingCar.number);
                                lis[a] = product.shopingCar.number;
                                a++;
                            })
                        });
                    if(data.list[0]) {
                        var json = {list: (data.list[0].products)};
                        console.log(data.list[0].products);
                        $(".warp").renderValues(json, {
                            getProductId: function (item, value) {
                                $(item).attr("data-eid", value);
                            },
                            getId: function (item, value) {
                                $(item).attr("data-pid", $(item).data("pid") + value);
                            }
                        });

                        console.log(lis);
                        //找到商品数量所在的标签
                        var setNum = $(".number").closest("div").find(".num");
                        console.log(setNum);
                        //将存储区数据渲染到数量上
                        for (var n = 0; n < setNum.length; n++) {
                            $(setNum[n]).html(lis[n]);
                        }
                        $("input[name='sex']").attr("data-pid", data.id);
                        // 找到勾选按钮，绑定事件
                        $('input[type="checkbox"]').click(function () {
                            /*ids[i] = $($($(this).closest("div").parent()).parent()).find("i").data("eid");
                        i++;*/
                            total();
                        });


                        // 找到加减按钮，绑定点击事件
                        $('.list ul img').click(function () {
                            //获取匹配的第二个元素 1为索引
                            //获取当前产品数量所在的元素
                            var val = $(this).parent().parent().children().eq(1);
                            //获取点击加减按钮的产品id
                            productId = $($($($(this).closest("div")).parent()).find("i")).data("eid");
                            //如果是加
                            if ($(this).parent().index()) {
                                //数量+1
                                val.html(parseInt(val.html()) + 1);
                                //获取数量
                                num = parseInt(val.html());
                            } else {
                                //减的按钮 大于1 则可以-1   否则不可以
                                val.html(val.html() > 1 ? parseInt(val.html()) - 1 : 1);
                                //获取数量
                                num = parseInt(val.html());
                            }
                            $.post("/users/" + user.id, {'product.id': productId, number: num}, function (data) {

                            });
                            total();
                        });

                        // 找到删除按钮，绑定点击事件
                        $('.icon-lajixiang').click(function () {
                            var self = this;
                            var id = $(self).data("eid");
                            $(document).dialog({
                                type: 'confirm',
                                content: '确定删除?',
                                onClickConfirmBtn: function (data) {
                                    $.ajax({
                                        type: "DELETE",
                                        url: "/users/" + id,
                                        success: function () {
                                            $(self).parent().parent().parent().parent().remove();
                                        }
                                    })
                                }
                            });
                            total();
                        });

                        //var datalist = [];
                        // var j = 0;

                        // 计算总积分
                        function total() {
                            var count = 0;
                            $('.list').map(function (index, item) {
                                var $el = $(item);
                                //如果勾选了
                                if ($el.find('input[type="checkbox"]').is(":checked")) {
                                    count += parseInt($el.find('#jifen').html()) * parseInt($el.find('.zuo li').eq(1).html());
                                    jQuery.ajaxSettings.traditional = true;
                                    /*$.ajax({
                                    type: 'PUT',
                                    url: "/persons/nums",
                                    data: {number: num, id: productId},
                                })
                                $.get("/persons/getId", {ids: ids}, function (data) {
                                    //给商品id
                                    datalist[j] = data;
                                    j++;
                                })*/
                                }
                            });

                            $(".db").click(function () {
                                var check = $("input:checked");
                                for (var i = 0; i < check.length; i++) {
                                    ids[i] = $(check[i]).data("pid");
                                }
                                var temp = "";
                                for (var i = 0; i < ids.length; i++) {
                                    temp += "id" + i + "=" + ids[i] + "&";
                                }
                                if (count > 0) {
                                    location.href = "/mine/store/order.html?" + temp;
                                }
                            })
                            //没勾选清零
                            $('.settlement span').html(count + '积分');
                        }
                    }else{
                        $(".warp").empty();
                    }
                }
                )
            }else{
                window.location.href="/login.html";
            }
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <h4>购物车</h4>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <div class="shopcar clearfloat" render-loop="list">
        <div class="list clearfloat fl">
            <div class="xuan clearfloat fl">
                <div class="radio">
                    <label>
                        <input type="checkbox" name="sex" data-pid="" render-key="list.id" render-fun="getId"/>
                    </label>
                </div>
            </div>
            <a href="javascript:void(0)">
                <div class="tu clearfloat fl" style="border-radius: 20px; overflow: hidden">
                    <img render-src="list.imgUrls" style="width: 100%; height: 122px; margin-top: -20px"/>
                </div>
                <div class="right clearfloat fl">
                    <p class="tit over" render-html="list.info"></p>
                    <p class="jifen over"><samp id="jifen" render-html="list.integral"></samp>积分</p>
                    <div class="bottom clearfloat">
                        <div class="zuo clearfloat fl">
                            <ul>
                                <li><img src="/mall/images/jian.jpg"/></li>
                                <li class="num" render-html="list.shopingCar.number">1</li>
                                <li><img src="/mall/images/jia.jpg"/></li>
                            </ul>
                        </div>
                        <i class="iconfont icon-lajixiang fr number"render-key="list.id" render-fun="getProductId"></i>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

<!--settlement star-->
<div class="settlement clearfloat">
    <div class="zuo clearfloat fl box-s">
        合计：<span>0积分</span>
    </div>
    <a type="button" class="fl db">
        立即结算
    </a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="/mine/store/shop.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="/mine/store/cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li class="active">
            <a href="shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>
</html>
